<template>
  <div class="vue-box sbot" >
    <!-- ------- 内容部分 ------- -->
    <div class="c-panel">
      <el-form v-if="m" :inline="true">
        <sa-info name="序号" br>{{ m.id }}</sa-info>
        <sa-info name="标题" br>{{ m.name }}</sa-info>
        <sa-info name="编码" br>{{ m.code }}</sa-info>
        <sa-info type="enum" name="类型" :jv="dims.VB_TYPE" :value="m.type" br />
        <sa-info type="enum" name="面板位置" :jv="dims.VB_LOCATION" :value="m.location" br />

        <sa-info name="面板序号" br>{{ m.locationIndex }}</sa-info>
        <sa-info name="数据标签" br>
          <div class="tag-info" v-for="(item, index) in panelTags" :key="index">
            <el-tag v-for="(k, v) in dims.STAT_OPT" :key="v" v-if="v === item.dataId">
              {{ k }}
            </el-tag>
          </div>
        </sa-info>

        <sa-info name="精确度" br>{{ m.accuracy }}</sa-info>
        <sa-info name="分隔符" br>{{ m.delimiter }}</sa-info>
        <sa-info type="enum" name="启用状态" :jv="dims.YES_OR_NO" :value="m.status" br />
        <sa-info name="创建时间" br>{{ m.createTime }}</sa-info>
        <sa-info name="描述" br>{{ m.note }}</sa-info>
        <sa-info name="序号" br>{{ m.sort }}</sa-info>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vb-info',
  props: { param: Object },
  data() {
    return {
      id: this.param.id,
      dims: this.param.dims,
      sa: sa,
      m: {},
      panelTags: []
    }
  },
  created: function () {
    sa.ajax('/vsb/getById', { id: this.id }, function (res) {
      this.m = res.data;
      if (this.m.panelTags) {
        this.panelTags = JSON.parse(this.m.panelTags)
      }
    }.bind(this), { type: "get" });
  },
  methods: {}
}
</script>

<style scoped>
.tag-info{
  padding: 0 5px 0 0px;
}

/* 链接样式  */
/*.my-link{position: relative; top: -1px; margin-left: 0.5em;}*/
</style>
